<template>
  <!-- 加入我们 -->
  <div id="joinUs">
    <div class="myBox" v-for="(item,index) in infoList" :key="index">
      <div class="titleBox">
        <p class="line"></p>
        <p class="titleName">{{item.Position}}</p>
        <p class="wage">{{item.Salary}}</p>
      </div>
      <!-- 岗位职责 -->
      <div class="zhizeBox">
        <p>岗位职责:</p>
        <div v-html="item.Responsibilities" class="zhizeContent"></div>
      </div>
      <!-- 任职要求 -->
      <div class="zhizeBox">
        <p>任职要求:</p>
        <div v-html="item.Claim" class="zhizeContent"></div>
      </div>
    </div>
    <div class="more_things">
      <span class="pointer" v-if="!load_more" @click="onLoadMore">加载更多</span>
      <span v-else>我是有底线的～</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'joinUs',
  data() {
    return {
      page: 1,
      infoList: [],
      load_more: false
    };
  },
  created() {
    this.GetRecruitmentInfo();
  },
  methods: {
    GetRecruitmentInfo() {
      var that = this;
      let url = 'GetRecruitmentInfo';
      let data = {
        page: that.page,
        limit: 20
      };
      that.$axios
        .post(url, data)
        .then(res => {
          if (res.data.Code == 0) {
            that.infoList = res.data.Data;
            if (res.data.Data.length < 20) {
              that.load_more = true;
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onLoadMore() {
      this.page += 1;
      this.GetRecruitmentInfo();
    }
  }
};
</script>

<style lang="less" scoped>
#joinUs {
  width: 100%;
  .myBox {
    width: 1200px;
    margin: 0 auto;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 45px;
    margin-top: 51px;
    .titleBox {
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: -10px;
      .line {
        width: 2px;
        height: 17px;
        background-color: #fd7f2c;
        margin-right: 8px;
      }
      .titleName {
        font-size: 16px;
        font-weight: 600;
        color: #222222;
        margin-right: 22px;
      }
      .wage {
        font-size: 16px;
        font-weight: 600;
        color: #fd7f2c;
      }
    }
    // 职责
    .zhizeBox {
      margin-top: 22px;
      p:nth-of-type(1) {
        font-size: 16px;
        // font-weight: bold;
        color: #555;
        padding-bottom: 10px;
      }
      .zhizeContent {
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 2;
        letter-spacing: 1px;
        color: #555;
      }
    }
  }
  .myBox:nth-last-child(1) {
    border: none;
  }
  .more_things {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 100%;
    letter-spacing: 0px;
    color: #fd7f2c;
    text-align: center;
    margin-top: 38px;
    margin-bottom: 50px;
  }
}
</style>